<template>
  <view class="speciPopup">
    <u-popup :show="CmSpeciShow" :round="10" mode="bottom" @close="close">
      <!--高度撑开-->
      <view class="content" :style="'height:' + height + 'px'">
        <view class="title">
          <image src="@/static/image/close.png" @click="closeFn" />
        </view>
        <view class="shopInfo">
          <image :src="shopInfo.imageInfos[0].imgUrl" />
          <view class="info_right">
            <view class="name">{{ shopInfo.skuName || '' }}</view>
            <view class="price">
              ￥<text>{{ shopInfo.disPrice }}</text>/{{ shopInfo.unitName || '' }}
              <del v-if="detailInfo.delPrice">
                ¥{{ shopInfo.disPrice || '' }}/{{ shopInfo.unitName || '' }}
              </del>
            </view>
            <view class="shopCode info_font_color">
              商品编码：<text>{{ shopInfo.skuCode }}</text>
              <text class="copy" @click="handleCopyCode">复制</text>
            </view>
            <view class="num_info_wrap">
              <view>
                件装数量：<text>{{ shopInfo.partsNumber || '' }}</text>
              </view>
              <view>
                最小起订量：<text>{{ defaultShopNum || '' }}{{ shopInfo.unitName || '' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!--数量-->
        <view class="buyNum">
          <text>购买数量</text>
          <u-number-box
            slot="right-icon"
            :value="shopNum"
            input-width="50"
            :color="color"
            :button-size="buttonSize"
            :bg-color="bgColor"
            :step="orderLimitType == 0 ? defaultShopNum : 1"
            :min="defaultShopNum"
            :defa="true"
            @change="changeNum"
          />
        </view>
        <view class="line" />
        <view class="skuSpeci">
          选择规格
          <view class="tips">
            <text v-if="shopInfo.skuStockInfo.actualStock >= shopNum" class="t-icon t-icon-xianhuo_tongyong_1" />
            预计出货日：{{ shopInfo.arrivalCycle || '' }}天
          </view>
        </view>
        <!--规格选择-->
        <view class="shopSpeci" :style="'height:' + contentHeight + 'px'">
          <view
            v-for="(item, index) in skuList"
            :key="index"
            :class="choiceIndex == index ? 'choiceSpeci' : ''"
            @click="choiceFn(item, index)"
          >{{ item.specificationProperties }}</view>
        </view>

        <view class="action_bar">
          <view class="Bottom">
            <view :class="newSaleFlag ? 'shopCar disableNone' : 'shopCar'" @click="handleAddShopping">加入购物车</view>
            <view :class="newSaleFlag ? 'buy disableNone' : 'buy'" @click="handleBuyNow">立即购买</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getNavHeight, cannotActionGoodsValidate } from '@/common/common';

export default {
  props: {
    speciShow: {
      type: Boolean,
      default: false
    },
    newSkuInfos: {
      type: Array,
      default: () => []
    },
    detailInfo: {
      type: Object,
      default: null
    },
    shopNum: {
      type: Number,
      default: 1
    },
    orderLimitType: {
      type: String,
      default: '1'
    },
    defaultShopNum: {
      type: Number,
      default: 1
    },
    saleFlag: {
      type: Boolean,
      default: false
    },
    productType: { // 商品类型
      type: Number,
      default: null
    },
    callbackUrl: { // 上一页路由
      type: String,
      default: '/shopDetail/index'
    },
    urlParams: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      height: 0,
      contentHeight: 0,
      CmSpeciShow: false,
      choiceIndex: '',
      shopInfo: this.newSkuInfos[0],
      skuList: [],
      color: '#323233',
      buttonSize: 30,
      bgColor: '#F5F5F5',
      newSaleFlag: this.saleFlag
    }
  },
  watch: {
    speciShow(newVal, oldVal) {
      if (newVal != oldVal) {
        this.CmSpeciShow = newVal
      }
    },
    detailInfo(newVal, oldVal) {
      if (newVal != oldVal) {
        this.shopInfo = newVal
      }
    },
    newSkuInfos(newVal, oldVal) {
      if (newVal != oldVal) {
        this.skuList = newVal
        this.getCycle()
      }
    },
    saleFlag(newVal, oldVal) {
      if (newVal != oldVal) this.newSaleFlag = newVal
    },
  },
  mounted() {
    this.height = uni.getSystemInfoSync().windowHeight - getNavHeight() - uni.upx2px(100)
    this.contentHeight = this.height - uni.upx2px(690)
    this.skuList = this.newSkuInfos
  },
  methods: {
    // 复制商品代码
    handleCopyCode() {
      uni.setClipboardData({
        data: this.shopInfo.spuCode,
        success: () => {
          uni.showToast({ title: '复制成功', icon: 'none' });
        }
      });
    },
    // 加入购物车
    handleAddShopping() {
      console.log('分类加入购物车事件', this.shopInfo)
      const { actualStock, virtualStock } = this.shopInfo.skuStockInfo
      if (this.shopInfo.priceAccuracyTag == 0) {
        return this.$u.toast('该商品价格仅供参考，如需购买，请先询价');
      }
      if ((actualStock + virtualStock) < this.shopNum) {
        return this.$u.toast('此商品库存不足');
      }
      const cannotAction = cannotActionGoodsValidate(this.productType, this.vuex_memberInfo?.accountType)
      if (cannotAction || this.newSaleFlag) return
      const addEvent = () => {
        this.$emit('addShopCar')
      }
      this.checkLoginState(addEvent)
    },
    // 立即购买
    handleBuyNow() {
      console.log('分类立即购买事件', this.shopInfo)
      const { actualStock, virtualStock } = this.shopInfo.skuStockInfo
      if (this.shopInfo.priceAccuracyTag == 0) {
        return this.$u.toast('该商品价格仅供参考，如需购买，请先询价');
      }
      if ((actualStock + virtualStock) < this.shopNum) {
        return this.$u.toast('此商品库存不足');
      }
      const cannotAction = cannotActionGoodsValidate(this.productType, this.vuex_memberInfo?.accountType)
      if (cannotAction || this.newSaleFlag) return
      const buyEvent = () => {
        this.$emit('buy')
        this.closeFn()
      }
      this.checkLoginState(buyEvent)
    },
    // 检测是否登录
    checkLoginState(actionEvent) {
      this.vuex_loginStatus ? actionEvent() : this.popupLogin()
    },
    // 弹出登录弹出层
    popupLogin() {
      const params = this.urlParams ?? {
        spuCode: this.detailInfo.spuCode
      }
      const urlParams = `callbackUrl=${this.callbackUrl}&urlParams=${JSON.stringify(params)}`
      const navigateUrl = `/login/login/codeLogin?${urlParams}`
      uni.navigateTo({ url: navigateUrl })
    },
    changeNum(e) { // 改变数量\
      this.$emit('update:shopNum', e.value)
      this.getCycle()
    },
    closeFn() { // 关闭规格
      this.$emit('closeSpeciFn', false)
      this.$emit('update:speci-show', false)
    },
    close() {
      console.log('这是关闭弹框')
      this.$emit('closeSpeciFn', false)
      this.$emit('update:speci-show', false)
    },

    choiceFn(item, index) { // 选择分类
      this.choiceIndex = index
      item = { ...item, disPrice: Number(item.disPrice).toFixed(2) }
      this.shopInfo = item
      this.getCycle()
      this.$emit('changeSpeci', item)
      this.$emit('update:shopNum', Number(item.ycMiniOrder))
      this.$emit('update:defaultShopNum', Number(item.ycMiniOrder))
      this.$emit('update:orderLimitType', item.orderLimitType)
    },
    getCycle() { // 计算预计出货日
      const { actualStock, arrivalCycle } = this.shopInfo?.skuStockInfo ?? {}
      var Cycle = this.shopNum > actualStock ? Number(arrivalCycle) + 1 : 1 // 如果输入的数量大于库存数，预计出货日自动加一。反之不变
      if (Cycle > 10 && Cycle < 30) {
        this.shopInfo.arrivalCycle = 10
      } else if (Cycle >= 30) {
        this.shopInfo.arrivalCycle = 30
      } else {
        this.shopInfo.arrivalCycle = Cycle
      }
    }
  }
}
</script>

<style scoped lang="scss">
// #ifdef MP-ALIPAY
/deep/.u-number-box__input {
  width: 30px;
}
// #endif
.speciPopup {
  .disableNone {
    opacity: 0.3;
  }
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    color: #222222;
    font-size: 28rpx;
    font-weight: 700;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
}
.shopInfo {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0 32rpx;
  box-sizing: border-box;
  image {
    width: 160rpx;
    height: 160rpx;
  }
  .info_right {
    width: 500rpx;
    .name {
      color: #222222;
      font-size: 28rpx;
      font-weight: 700;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
  }
  .price {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    align-content: flex-end;
    color: #FF5533;
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 16rpx;
    text {
      color: #FF5533;
      font-size: 48rpx;
      font-weight: 700;
      position: relative;
      top: 6rpx;
    }
    del {
      font-size: 24rpx;
      font-weight: 400;
      color: #808080 !important;
      margin-left: 24rpx;
      text-decoration: line-through;
    }
  }
  .shopCode {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin-top: 8rpx;
    .copy{
      height: 34rpx;
      line-height: 34rpx;
      font-weight:normal;
      padding: 0 10rpx;
      margin-left: 16rpx;
      font-size: $uni-font-size-sm;
      background: $uni-f5bg-color;
      border-radius: $uni-border-radius-sm;
    }
  }
}
.buyNum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  color: #808080;
  font-size: 28rpx;
  font-weight: 400;
  margin-top: 34rpx;
  .input {
    width: 100rpx;
    height: 64rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid rgba(211,211,211,1);
    border-radius: 8rpx;
    margin: 0rpx 8rpx;
  }
  .plus {
    width: 64rpx;
    height: 64rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(211,211,211,1);
  }
}
.line {
  padding: 0 32rpx;
  background: #F5F5F5;
  height: 1rpx;
  margin-top: 32rpx;
}
.skuSpeci {
  color: #808080;
  font-size: 28rpx;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-top: 30rpx;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  .tips {
    color: #222222;
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    align-items: center;
    align-content: center;
    .t-icon {
      width: 56rpx;
      height: 32rpx;
      margin-right: 16rpx;
    }
  }
}
.shopSpeci {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  align-content: baseline;
  flex-wrap: wrap;
  padding: 0 32rpx;
  box-sizing: border-box;
  overflow-y: auto;
  margin-top: 10rpx;
  padding-top: 10rpx;
  view {
    flex-shrink: 0;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    border: 2rpx solid rgba(211,211,211,1);
    background: rgba(255,255,255,1);
    margin-right: 16rpx;
    color: #222222;
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-bottom: 24rpx;
    transform: rotateZ(360deg);
  }
  .choiceSpeci {
    color: #FF5533;
    border-color: #FF5533;
  }
}
.content {
  .action_bar {
    position: fixed;
    width: 100%;
    bottom: calc(60rpx + constant(safe-area-inset-bottom));
    bottom: calc(60rpx + env(safe-area-inset-bottom));
  }
}
.Bottom {
  padding: 18rpx 48rpx;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  view {
    color:$uni-bg-color;
    font-size:$uni-font-size-base;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius:$uni-border-radius-default;
    width: 320rpx;
    height:68rpx;
    line-height: 68rpx;
  }
  .buy {
    background: linear-gradient(132.3deg, rgba(250,199,102,1) 0%, rgba(239,180,29,1) 100%);
  }
  .shopCar {
    background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
  }
}

.info_font_color {
  font-size: 26rpx;
  font-weight: 400;
  color: #808080;
  text {
    color: #222222;
    //font-weight: 700;
  }
}

.num_info_wrap {
  view, text {
    margin-top: 4rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #808080;
  }
}
</style>
